<!--
 * @Descripttion: 
 * @version: 
 * @Author: weihua.yao
 * @Date: 2021-04-15 23:30:21
 * @LastEditTime: 2021-04-16 11:40:54
-->
<!-- 绘图流程
引入 js 库
编写渲染容器 DOM，添加 width 和 height 样式属性
获取渲染 DOM 对象
初始化 ECharts 对象
编写 option 参数
调用 setOption 完成渲染
-->
<!DOCTYPE html>
<html>
  <head>
    <script src="https://cdn.jsdelivr.net/npm/echarts@4.7.0/dist/echarts.min.js"></script>
    <style>
      #chart {
        width: 800px;
        height: 400px;
      }
    </style>
  </head>
  <body>
    <div id="chart"></div>
    <script>
      const chartDom = document.getElementById("chart");
      const chart = echarts.init(chartDom);
      chart.setOption({
        title: {
          text: "快速入门ECharts",
        },
        legend: {
          data: ["库存", "出售"],
        },
        xAxis: {
          data: ["食品", "数码", "服饰", "箱包"],
          axisLabel: {
            textStyle: {
              color: "#222",
            },
          },
        },
        yAxis: {type : 'value'},
        series: [
          {
            name: "库存",
            type: "bar",
            data: [1000, 1200, 900, 1500],
            barWidth: 30,
          },
          {
            name: "出售",
            type: "bar",
            data: [100, 120, 90, 150],
            barWidth: 30,
          },
        ],
      });
    </script>
  </body>
</html>
